<template>
  <div class="container">
    <div class="handle-box">
      <el-form ref="form" :model="form" label-width="90px" class="flex">
        <el-form-item label="姓名：">
          <el-input v-model="name" placeholder="请输入姓名" class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="卡号：">
          <el-input v-model="name" placeholder="请输入卡号" class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="name" placeholder="请输入手机号" class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="楼号：">
          <el-input v-model="name" placeholder="请输入楼号" class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="单元号：">
          <el-input v-model="name" placeholder="请输入单元号" class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="门牌号：">
          <el-input v-model="name" placeholder="请输入门牌号" class="handle-input mr10"></el-input>
        </el-form-item>
        <!-- <el-form-item label="日期范围：">
                       <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="danger" icon="el-icon-circle-close">清空</el-button>
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addlistdatadiglog()"
          >新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    >
      <el-table-column prop="NAME" label="居民信息" width="80" align="center"></el-table-column>
      <el-table-column prop="VID" label="居民ID" width="80" align="center"></el-table-column>
      <el-table-column prop="VILLAGE_NO" label="小区ID"></el-table-column>
      <el-table-column prop="SIMCARD_NO" label="卡号"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="IdNumber" label="身份证号"></el-table-column>
      <el-table-column prop="PHONE" label="联系电话"></el-table-column>
      <el-table-column prop="BUILDING" label="楼号"></el-table-column>
      <el-table-column prop="UNIT" label="单元"></el-table-column>
      <el-table-column prop="DOOR" label="门牌号"></el-table-column>
      <el-table-column prop="CREATE_DATE" label="注册日期"></el-table-column>
      <el-table-column prop="ISUSE" label="是否启用"></el-table-column>
      <el-table-column prop="PHOTO" label="照片"></el-table-column>
      <el-table-column prop="REMARK" label="备注"></el-table-column>
      <!-- <el-table-column v-for="item in integral" label="积分">
                {{item}}
      </el-table-column>-->
      <el-table-column prop="cardnumber" label="卡号"></el-table-column>
      <!-- <el-table-column prop="registrationdate" label="注册日期"></el-table-column> -->
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>|
          <el-button type="text" @click="dellistdata(scope.row)" style="color:red">删除</el-button>|
          <el-button type="text" @click="handle()" style="color:#2A47BD">积分管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog v-dialogDrag title="编辑" :visible.sync="editVisible" width="50%">
      <el-form ref="form" :model="form" label-width="70px" class="display">
        <el-form-item label="居民姓名：" prop="name" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="小区ID：" :label-width="labelwidth" class="wid50">
          <el-cascader v-model="form.villageno" :options="options" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item label="卡号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.simcardno"></el-input>
        </el-form-item>
        <el-form-item label="性别：" :label-width="labelwidth" class="wid50">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.Idnumber"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="楼号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.building"></el-input>
        </el-form-item>
        <el-form-item label="单元：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.unit"></el-input>
        </el-form-item>
        <el-form-item label="门牌号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.door"></el-input>
        </el-form-item>
        <!-- <el-form-item label="注册日期：" :label-width="labelwidth" class="wid50"> -->
        <!-- <el-date-picker
                          v-model="form.createdate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
        </el-date-picker>-->
        <!-- </el-form-item> -->
        <el-form-item label="是否启用：" :label-width="labelwidth" class="wid50">
          <el-select v-model="form.isuse" placeholder="请选择是否启用">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.photo"></el-input>
          <!-- <el-upload
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :file-list="fileList"
                          list-type="picture">
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>-->
        </el-form-item>
        <el-form-item label="备注：" :label-width="labelwidth" class="wid50">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹出框 -->
    <el-dialog
      v-dialogDrag
      title="新增"
      :rules="rules"
      :visible.sync="addlistdatadiaglog"
      width="50%"
    >
      <el-form ref="form" :model="ruleForm" label-width="70px" class="display">
        <el-form-item label="居民姓名：" prop="name" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="小区ID：" :label-width="labelwidth" class="wid50">
          <el-cascader v-model="ruleForm.villageno" :options="options" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item label="卡号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.simcardno"></el-input>
        </el-form-item>
        <el-form-item label="性别：" :label-width="labelwidth" class="wid50">
          <el-select v-model="ruleForm.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.Idnumber"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="楼号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.building"></el-input>
        </el-form-item>
        <el-form-item label="单元：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.unit"></el-input>
        </el-form-item>
        <el-form-item label="门牌号：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.door"></el-input>
        </el-form-item>
        <!-- <el-form-item label="注册日期：" :label-width="labelwidth" class="wid50">
                        <el-date-picker
                          v-model="ruleForm.createdate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
        </el-form-item>-->
        <el-form-item label="是否启用：" :label-width="labelwidth" class="wid50">
          <el-select v-model="ruleForm.isuse" placeholder="请选择是否启用">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.PHOTO"></el-input>
          <!-- <el-upload
                                class="avatar-uploader"
                                ref="upload"
                                :show-file-list="false"
                                action="/index/upload"
                                :before-upload="beforeUpload"
                                :on-change="handleChange"
                                :auto-upload="false"
                                :data="ruleForm">
                            <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>-->
        </el-form-item>
        <el-form-item label="备注：" :label-width="labelwidth" class="wid50">
          <el-input v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addlistdatadiaglog = false">取 消</el-button>
        <el-button type="primary" @click="addlistdata(ruleForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'

export default {
  data () {
    return {
      ruleForm: {
        name: '',
        imageUrl: '',
      },
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      userList: [],
      address: '',
      name: '',
      value1: '',
      labelswidth: '160px',
      addlistdatadiaglog: false,
      form: {
        integral: '',
        score: '',
        remaining: '',
        chuyuintegral: '',
        chuyuscore: '',
        chuyuremaining: '',
        youhaiintegral: '',
        youhaiscore: '',
        youhairemaining: '',
        qitaintegral: '',
        qitascore: '',
        qitaremaining: ''
      },
      ruleForm: {
        name: '',
        villageno: '',
        simcardno: '',
        sex: '',
        Idnumber: '',
        phone: '',
        building: '',
        unit: '',
        door: '',
        createdate: '',
        isuse: '',
        imageUrl: '',
        remark: ''
      },
      rules: {
        name: [
          // { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      options: [],
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      labelwidth: '120px'
    }
  },
  created () {
    // this.getData();
    this.getlistdata();
    this.loadCheckbox_SCV()
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    // getData() {
    //     fetchData(this.query).then(res => {
    //         console.log(res);
    //         this.tableData = res.list;
    //         this.pageTotal = res.pageTotal || 50;
    //     });
    // },
    // 触发搜索按钮
    // handleSearch() {
    //     this.$set(this.query, 'pageIndex', 1);
    //     // this.getData();
    // },
    createMiniQrcode (blob) {
      let img = document.createElement('img')
      img.onload = function (e) {
        // 元素的onload 事件触发后将销毁URL对象, 释放内存。
        window.URL.revokeObjectURL(img.src)
      }
      // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
      // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
      img.src = window.URL.createObjectURL(blob)
      console.log(img)
      document.querySelector('.imgQrCode').appendChild(img)
    },
    async loadCheckbox_SCV () {
      var url = this.$url + '/GetGroupsApi?ClientNo=' + localStorage.getItem('clentno');
      const { data } = await this.$axios.get(url)
      this.options = data.filter(item => {
        return item
      })
    },
    addlistdatadiglog () {
      this.addlistdatadiaglog = true;
    },
    async searchTable4 (carName) {
    //   if (!this.form.company2) {
    //     console.log('请选择区域')
    //     return
    //   }
    //   var date = ''
    //   if (this.form.radio2 === '3') {
    //     date = this.dateFormatDay(this.form.valueDay2)
    //   }
    //   if (this.form.radio2 === '4') {
    //     date = this.dateFormatMonth(this.form.valueMonth2)
    //   }
      var url = `/DataListCompany/GetWeightByCphApi?Date=` + date + '&&ClientNo=' + this.form.company2 + '&&Type=' + this.form.type2 + '&&VehicleNo=' + carName
      // http://111.160.78.62:9942/GarbagePointsApi/InspectionGuidance/GetWorkerStatisticsInfoApi?StreetNo=2

      const { data } = await this.$Http.get(url)
    //   var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetWeightByCphApi?Date=' + date + '&&ClientNo=' + this.form.company2 + '&&Type=' + this.form.type2 + '&&VehicleNo=' + carName
    //   console.log('url=' + url)
    //   const { data } = await this.$axios.get(url)
      this.listDataDistrictDetail = data.filter(item => {
        return item
      })
      this.dialoginnerVisible4 = true
    },
    addlistdata (formName) {
      this.$axios({
        url: this.$url + '/AddPeopleApi',
        method: 'get',
        params: {
          NAME: this.ruleForm.name,
          VILLAGE_NO: this.ruleForm.villageno,
          SIMCARD_NO: this.ruleForm.simcardno,
          sex: this.ruleForm.sex,
          IdNumber: this.ruleForm.Idnumber,
          PHONE: this.ruleForm.phone,
          BUILDING: this.ruleForm.building,
          UNIT: this.ruleForm.unit,
          DOOR: this.ruleForm.door,
          CREATE_DATE: this.ruleForm.createdate,
          ISUSE: this.ruleForm.isuse,
          PHOTO: this.ruleForm.imageUrl,
          REMARK: this.ruleForm.remark
        }
      }).then(res => {
        if (res.data.IsSucess) {
          this.getlistdata()
          this.addlistdatadiaglog = false
        }
      })
      console.log(this.ruleForm)
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.imageUrl = '';
    },
    handleChange (file, fileList) {
      this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    },

    beforeUpload (file) {
      return true;
    },
    sucesslistdata () {
      this.addlistdatadiaglog == false
    },
    getlistdata () {

      this.$axios({
        url: this.$url + '/GetPeopleListApi',
        method: 'get'
      }).then(res => {
        console.log(res)
        if (res.status == '200') {
          console.log(res.data)
          this.tableData = res.data.filter(item => {
            item.CREATE_DATE = item.CREATE_DATE.replace('T', ' ')
            return item
            if (item) {
              this.createMiniQrcode(item.PHOTO)
            }
          })
          // this.tableData == res.data
        }
      })
    },
    dellistdata (row) {
      console.log(row.VID)
      this.$axios({
        url: this.$url + '/DeletePeopleApi',
        method: 'get',
        params: {
          VID: row.VID
        }
      }).then(res => {
        if (res.data.IsSucess) {
          this.$message.success('删除成功');
          this.getlistdata()
        } else {
          this.$message.error('删除失败')
        }
      })
      // console.log(e.target.parentElement.parentElement.parentElement.parentElement)
    },
    mohu () {
      var search = this.name;
      console.log(search)
      var newdate = [];
      if (search) {
        if (search)
          this.tableData.filter(item => {
            if (item.name.indexOf(search) != -1) {
              newdate.push(item)
            }
          })
      } else if (search == '') {
        this.getlistdata()
      }
      this.tableData = newdate
    },
    // 积分展示
    handle () {
      this.$router.push('/residentsintegral')
    },
    //编辑
    handleEdit (index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // handleDelete(index, row) {
    //     // 二次确认删除
    //     this.$confirm('确定要删除吗？', '提示', {
    //         type: 'warning'
    //     })
    //         .then(() => {
    //             this.$message.success('删除成功');
    //             this.tableData.splice(index, 1);
    //         })
    //         .catch(() => {});
    // },
    // 保存编辑
    // saveEdit() {
    //     this.editVisible = false;
    //     this.$message.success(`修改第 ${this.idx + 1} 行成功`);
    //     this.$set(this.tableData, this.idx, this.form);
    // },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
.el-cascader--small {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>